<template>
  <div class="index-container">
    <div class="warpper">
      <van-form @submit="onSubmit">
        <van-field
          v-model="selfUserInfo.id"
          name="id"
          label="主键"
          placeholder="主键"
          readonly
          v-show="false"
        />
        <van-field
          v-model="selfUserInfo.aae100"
          name="aae100"
          label="有效标识"
          placeholder="有效标识"
          readonly
          v-show="false"
        />
        <van-field
          v-model="selfUserInfo.xm"
          name="xm"
          label="姓名"
          placeholder="姓名"
          v-show="false"
          readonly
        />

        <van-field
          v-model="selfUserInfo.idcard"
          name="idcard"
          label="证件号码"
          placeholder="证件号码"
          readonly
          v-show="false"
        />
        <van-field
          v-model="selfUserInfo.tel"
          name="tel"
          label="手机号码"
          placeholder="手机号码"
          v-show="false"
          readonly
        />
        <van-field
          v-model="selfUserInfo.fakexm"
          name="fakexm"
          label="姓名"
          placeholder="姓名"
          readonly
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          name="xb"
          label="性别"
          :rules="[{ required: true, message: '请选择性别' }]"
        >
          <template #input>
            <van-radio-group v-model="selfUserInfo.xb" direction="horizontal">
              <van-radio name="male">男</van-radio>
              <van-radio name="female">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="selfUserInfo.fakeidcard"
          name="fakeidcard"
          label="证件号码"
          placeholder="证件号码"
          readonly
          :rules="[{ required: true, message: '请填写证件号码' }]"
        />
        <van-field
          v-model="selfUserInfo.faketel"
          name="faketel"
          label="手机号码"
          placeholder="手机号码"
          readonly
          :rules="[{ required: true, message: '请填写手机号码' }]"
        />
        <van-field
          v-model="selfUserInfo.chlx"
          name="chlx"
          label="人员类型"
          placeholder="人员类型"
          readonly
          :rules="[{ required: true, message: '请填写人员类型' }]"
        />

        <van-field
          v-model="selfUserInfo.sz"
          name="sz"
          label="赛组"
          placeholder="赛组"
          :rules="[{ required: true, message: '请填写赛组' }]"
        />
        <van-field
          v-model="selfUserInfo.xmmc"
          name="xmmc"
          label="项目名称"
          placeholder="项目名称"
          :rules="[{ required: true, message: '请填写项目名称' }]"
        />
        <van-field
          v-model="selfUserInfo.xmbh"
          name="xmbh"
          label="项目编号"
          placeholder="项目编号"
          :rules="[{ required: true, message: '请填写项目编号' }]"
        />
        <van-field
          v-model="selfUserInfo.szh"
          name="szh"
          label="赛序号"
          placeholder="赛序号"
          :rules="[{ required: true, message: '请填写赛序号' }]"
        />

        <van-field
          v-model="selfUserInfo.xmfzr"
          name="xmfzr"
          label="项目负责人"
          placeholder="项目负责人"
          :rules="[{ required: true, message: '请填写项目负责人' }]"
        />

        <van-field
          v-model="selfUserInfo.gj"
          name="gj"
          label="国籍"
          placeholder="国籍"
          :rules="[{ required: true, message: '请填写国籍' }]"
        />
        <van-field
          v-model="selfUserInfo.szgj"
          name="szgj"
          label="所在国家"
          placeholder="所在国家"
          :rules="[{ required: true, message: '请填写所在国家' }]"
        />
        <van-field
          v-model="selfUserInfo.sq"
          name="sq"
          label="时区"
          placeholder="时区"
          :rules="[{ required: true, message: '请填写时区' }]"
        />

        <van-field
          name="syyy"
          label="使用语言"
          :rules="[{ required: true, message: '请选择性别' }]"
        >
          <template #input>
            <van-radio-group v-model="selfUserInfo.syyy" direction="horizontal">
              <van-radio name="中文">中文</van-radio>
              <van-radio name="英语">英语</van-radio>
              <van-radio name="其他">其他</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field
          v-model="selfUserInfo.email"
          name="email"
          label="电子邮箱"
          placeholder="电子邮箱"
        />

        <van-field
          v-model="selfUserInfo.wx"
          name="wx"
          label="微信"
          placeholder="微信"
        />
        <van-field
          v-model="selfUserInfo.qtlxfs"
          name="qtlxfs"
          label="其他联系方式"
          placeholder="其他联系方式"
        />

        <van-field name="cpsj" label="彩排时间">
          <template #input>
            <van-checkbox-group
              v-model="selfUserInfo.cpsj" direction="horizontal"
            >
              <van-checkbox name="北京时间11月13日 15:00-18:00" shape>北京时间11月13日 15:00-18:00</van-checkbox>
              <van-checkbox name="北京时间11月13日 19:00-21:00" shape>北京时间11月13日 19:00-21:00</van-checkbox>
              <van-checkbox name="北京时间11月18日 15:00-20:00" shape>北京时间11月18日 15:00-20:00</van-checkbox>
            </van-checkbox-group>
          </template>
        </van-field>

        <van-field
          v-model="selfUserInfo.bz"
          name="bz"
          label="备注"
          placeholder="备注"
        />

        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
      <!--      日历组件-->
      <van-calendar v-model="arrivesShowCalendar" @confirm="arriveCalenderConfirm" />

    </div>
  </div>
</template>

<script>
import {saveUserInfo} from "api/userInfo";
import { Dialog } from 'vant';
import minixUserSave from '@/minix/minixUserSave'
import minixCalendar from '@/minix/minixCalendar'
export default {
  name: "abroadSingleRace",
  props:{
    userInfo:{type:Object}
  },
  mixins: [minixUserSave,minixCalendar],  //复用mixin
  data(){
    return{
      selfUserInfo:{...this.userInfo},
      arrivesShowCalendar:false,
      calendarNanme:null,
    }
  },
  mounted() {
    console.log("海外个人参赛信息挂载")
    console.log(this.userInfo)
  },
  methods:{
    // onSubmit(data){
    //   delete data.fakexm;
    //   delete data.faketel;
    //   delete data.fakeidcard;
    //   console.log("海外个人参赛保存操作")
    //   data.aae036="2021-02-01"
    //   //联络方式最少三选一
    //   if(!!!this.selfUserInfo.email && !!!this.selfUserInfo.wx && !!!this.selfUserInfo.qtlxfs){
    //     Dialog.alert({
    //       title: '错误信息',
    //       message: '电子邮箱、微信、其他联系方式最少填写一个！',
    //     })
    //     return;
    //   }
    //   saveUserInfo(data).then(
    //     res =>{
    //       if(res.code == 200){
    //         Dialog.alert({
    //           message: '保存成功',
    //         })
    //       }
    //     }
    //   ).catch(err =>{
    //     console.log("海外个人参赛保存失败："+err)
    //     Dialog.alert({
    //       title: '错误信息',
    //       message: '保存失败',
    //     })
    //   })
    // },
    // showCalendar(name){
    //   this.arrivesShowCalendar = true;
    //   this.calendarNanme = name
    // },
    // arriveCalenderConfirm(date){
    //   this.selfUserInfo[this.calendarNanme] = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    //   this.arrivesShowCalendar = false;
    // },
  }
}
</script>

<style scoped>

</style>
